<template>
	<view class="personalswiper">
		<view class="swiper-text-box">
			<view class="swiper-text-item" @click="changeSwiper(0)" :class="current == 0 ? 'current':''">
				<view class="swiper-text">作品</view>
				<view class="swiper-text-num">{{mylist.length}}</view>
			</view>
			<view class="swiper-text-item" @click="changeSwiper(1)" :class="current == 1 ? 'current':''">
				<view class="swiper-text">动态</view>
				<view class="swiper-text-num">{{list.length}}</view>
			</view>
			<view class="swiper-text-item" @click="changeSwiper(2)" :class="current == 2 ? 'current':''">
				<view class="swiper-text">喜欢</view>
				<view class="swiper-text-num">{{list.length}}</view>
			</view>
		</view>
		<swiper class="swiper" @change="swiperChange" :current="current" :style="'height: '+swiperheight+'px'">
			<swiper-item>
				<view class="swiper-item">
					<view class="personal-list">
						<view class="personal-item" v-for="item in mylist" :key="item.id">
							<video class="video" :show-center-play-btn="false" id="myvideo"
								:src="ip+'/video/'+item.src" :controls="false" objectFit="cover"></video>
							<view class="love-box">
								<icon class="love-icon iconfont icon-aixin1"></icon>
								<text class="love-text">{{item.loveNumber | filter}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="personal-list">
						<view class="personal-item" v-for="item in list" :key="item.id">
							<video class="video" :show-center-play-btn="false" id="myvideo"
								:src="ip+'/video/'+item.src" :controls="false" objectFit="cover"></video>
							<view class="love-box">
								<icon class="love-icon iconfont icon-aixin1"></icon>
								<text class="love-text">{{item.loveNumber}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="personal-list">
						<view class="personal-item" v-for="item in list" :key="item.id">
							<video class="video" :show-center-play-btn="false" id="myvideo"
								:src="ip+'/video/'+item.src" :controls="false" objectFit="cover"></video>
							<view class="love-box">
								<icon class="love-icon iconfont icon-aixin1"></icon>
								<text class="love-text">{{item.loveNumber}}</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="nothing">没有更多啦</view>
	</view>
</template>

<script>
	import t from '../common/helper.js';
	import FollowList from './FollowList.vue';

	export default {
		name: "PersonalSwiper",
		data() {
			return {
				ip: t.o,
				list: [],
				mylist: [],
				swiperheight: '',
				current: 0,
			};
		},
		components: {
			FollowList,
		},
		props: ['swiper_list', 'swiper_mylist'],
		filters: {
			filter(value) {
				if (value > 9999) {
					if (value % 10000 >= 1000) {
						return (value / 10000).toFixed(1) + 'w';
					}
					return (value / 10000).toFixed(0) + 'w';
				} else {
					return value;
				}
			}
		},
		watch: {
			swiper_mylist(val) {
				this.mylist = this.swiper_mylist;
			},
			swiper_list(val) {
				this.list = val;
			}
		},
		created() {
			this.mylist = this.swiper_mylist;
			this.list = this.swiper_list;
			this.getSwiperHeight();
		},
		methods: {
			getSwiperHeight() {
				this.$nextTick(() => {
					if (this.current == 0) {
						this.swiperheight = Math.ceil(this.mylist.length / 3) * 200;
					} else {
						this.swiperheight = Math.ceil(this.list.length / 3) * 200;
					}
				})
			},
			swiperChange(e) {
				this.current = e.detail.current;
				this.getSwiperHeight();
			},
			changeSwiper(e) {
				this.current = e;
				this.getSwiperHeight();
			}
		}
	}
</script>

<style lang="scss">
	.personalswiper {
		.swiper-text-box {
			padding: 0 20px;
			display: flex;

			.current {
				color: #FFFFFF !important;
				border-bottom: 2px solid yellow;
			}

			.swiper-text-item {
				flex: 1;
				justify-content: center;
				display: flex;
				color: #888888;
				height: 40px;
				line-height: 40px;

				.swiper-text {
					margin-right: 5px;
				}
			}
		}

		.swiper {
			height: auto;

			.swiper-item {
				.personal-list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					background-color: #000000;

					.personal-item {
						flex: 0 0 33.3%;
						position: relative;
						height: 200px;

						.video {
							width: 100%;
							height: 200px;
						}

						.love-box {
							font-size: 14px;
							position: absolute;
							bottom: 10px;
							left: 10px;
						}
					}
				}
			}
		}

		.nothing {
			width: 100%;
			height: 50px;
			margin-bottom: 100px;
			line-height: 50px;
			text-align: center;
			color: #888888;
		}
	}
</style>
